<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 150 100"
    :width="width"
    :height="height"
    preserveAspectRatio="xMidYMid meet"
  >
    <title>JSONForms Logo</title>

    <g
      xmlns="http://www.w3.org/2000/svg"
      transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)"
      :fill="primaryColor"
      stroke="none"
      id="g6"
    >
      <path
        d="M161 937 c-49 -24 -62 -65 -70 -221 -7 -156 -15 -177 -67 -190 -18 -5 -24 -13 -24 -35 0 -22 7 -31 30 -41 48 -20 57 -50 62 -212 4 -121 8 -152 24 -180 25 -42 91 -67 131 -49 36 16 28 52 -14 63 -18 5 -36 14 -40 21 -4 6 -10 75 -13 152 -6 151 -22 208 -69 231 l-22 11 25 17 c47 30 59 70 65 219 6 146 10 157 58 157 28 0 37 14 29 46 -5 20 -12 24 -44 24 -20 0 -48 -6 -61 -13z"
        id="path8"
      />
      <path
        d="M1204 936 c-11 -29 1 -51 28 -54 49 -6 58 -33 58 -172 0 -141 13 -185 64 -209 l29 -14 -25 -13 c-46 -24 -61 -75 -68 -229 -3 -77 -9 -146 -13 -152 -4 -7 -22 -16 -40 -21 -22 -6 -33 -15 -35 -30 -5 -32 33 -47 86 -32 66 17 74 38 83 210 8 162 23 214 66 231 36 13 32 64 -6 77 -46 16 -54 44 -60 202 -7 158 -17 191 -67 210 -38 15 -94 12 -100 -4z"
        id="path10"
      />
      <path
        d="M467 923 c-15 -2 -43 -20 -62 -38 -45 -45 -47 -71 -43 -450 4 -430 -23 -400 368 -400 395 0 365 -37 365 445 0 479 27 444 -345 446 -140 1 -268 0 -283 -3z m553 -73 c19 -19 20 -33 20 -372 0 -313 -2 -353 -17 -370 -15 -17 -37 -18 -290 -18 -260 0 -274 1 -293 20 -19 19 -20 33 -20 370 0 337 1 351 20 370 19 19 33 20 290 20 257 0 271 -1 290 -20z"
        id="path12"
      />
      <path
        d="M500 740 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
        id="path14"
      />
      <path
        d="M500 590 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
        id="path16"
      />
      <path
        d="M500 410 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
        id="path18"
      />
      <path
        d="M500 240 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
        id="path20"
      />
    </g>
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useTheme } from 'vuetify';

const theme = useTheme();
defineProps<{
  width: string | number;
  height: string | number;
}>();

const primaryColor = computed(() => theme.current.value.colors.primary);
</script>
